<template>
  <div>
      <van-field
        :value="value"
        :required="!norequired"
        clickable
        :label="label"
        :placeholder="placeholder"
        readonly
        is-link
        @click-input="disabled ? () => {} : (showPicker = true)"
        :disabled="disabled"
      ></van-field>
      <van-popup v-model="showPicker" position="bottom" :height="height" style="width:'100%' ">
        <van-picker
          show-toolbar
          :columns="columns"
          :value-key="valueKey"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        >
        <slot></slot>
        </van-picker>
      </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPicker: false,
    };
  },
  model:{
    prop:'value',
    event:"changepicker",
  },
  props: {
    value:[String,Number],
    disabled: Boolean,
    labelkey: String,
    form: Object, // 需要修改的数据  很重要
    label: String,
    icon: String,
    placeholder: String,
    name: String, // key 很重要
    columns: Array, // 下拉列表的数据 很重要
    norequired: Boolean, // 默认是false 不影响其他的 这个
    valueKey: [Array, String],
    valueId: [Array, String],
    height: {
      type: String,
      default: "40%",
    },
  },
  methods:{
    onConfirm(value,index) {
      
      this.$set(this.form,this.name,value[this.name])  //id
      this.$emit("changepicker",  value[this.valueKey]);   // 只能获取 label  
      this.$emit('click-input',this.name,value[this.name]) //获取单个
      this.showPicker = false;
    },
  }
};
</script>

<style lang="scss" scoped>
</style>